<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!doctype html>
<html class="no-js">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title></title>

<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/amazeui/2.7.2/css/amazeui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.juweinong.cn/addons/tiger_taoke/template/mobile/tbgoods/style2/css/style.css" />

<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<!-- 微信自定义接口 -->
<script>
	wx.config();
	wx.ready(function(){
		wx.onMenuShareAppMessage({
			title: document.title,
			desc: "",
			link: window.location.href ,
			imgUrl: ""
		}); 
		wx.onMenuShareTimeline({
			title: document.title,
			desc: "",
			link: window.location.href,
			imgUrl: ""
		});
	});
</script><!-- 微信自定义接口 -->

</head>

<body>

<div class="am-modal am-modal-alert" tabindex="-1" id="fq_alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_alert_title"></div>
    <div class="am-modal-bd" id="fq_alert_info">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="fq_confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_confirm_title"></div>
    <div class="am-modal-bd" id="fq_confirm_info"></div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

<link rel="stylesheet" href="http://www.juweinong.cn/addons/tiger_taoke/template/mobile/user/css/face.css" />
<script src="http://www.juweinong.cn/addons/tiger_taoke/template/mobile/user/js/face.js"></script>
<div class="release">
    <header style="position:relative;z-index:999;background:#F54D23;">
    <a href="javascript:void(0);" onclick="back();" style="position:absolute;top:2px;color:#fff;width:45px;height:100%;padding-left:10px;font-size:25px;" class="am-inline-block am-text-middle am-icon-angle-left"><!-- <img src="/Public/assets/mobile/images/left.png" />--></a><div class="am-per-center am-text-center am-padding-vertical-sm" style="color:#fff;font-size:16px;">晒单发布</div>
</header>
<script>
    function back(){
        window.history.back();
    }
</script>
     <ul class="am-tabs-nav am-nav am-nav-tabs" id="nav2">
        <li  style="padding-right:0;padding-left:0;"><a href="./shai?t=list">晒单广场</a></li> 
        <li style="padding-right:0;padding-left:0;"><a href="./shai?t=my">我的晒单</a></li>
        <!--li style="padding-right:0;padding-left:0;"><a href="/share/ranking.html">积分排行</a></li-->
        <li class="am-active" style="float:right;"><a href="./shai?t=">晒单发布</a></li>
    </ul>
<style>
    #nav2{
        margin:0;
    }
    #nav2 li{
        height:100%;
        padding:0 5px;
    }
    #nav2 li.am-active{
        border-bottom:.3rem solid #F54D23;
    }
    #nav2 li.am-active a{
        color:#F54D23;
    }
    #nav2 li a{
        border:0;
        padding:10px 7px;
        font-size:1.4rem;
        color:#3d0505;
    }
      
    .release{
        margin-bottom:49px;color:#3D0505;font-family:'Microsoft YaHei';
    }
    .top_nav{
        margin:0;
        padding:5px 0 0 10px;
        list-style:none;
    }
    .top_nav li{
        float:left;
        
    }
    .top_nav li a.am-active{
        border-bottom:2px solid #F54D23;
    }
    .release hr{
        margin:5px 0 10px;
        background-color:#f8f8f8;
        border:0;height:.5rem
    }
    #evaluation{
        width:100%;
        padding:0.625em;
        outline:none;
        /*border-color:rgb(25, 167, 240);*/
    }
    #order{
        width:70%;
        margin:0 auto;
        outline:none; 
        border-radius:4px;
        border:1px solid #F54D23;
        font-weight:normal;
    }
    .star i{
        color:rgb(255,215,000);
    }
    #price{
        width:18%;
        border:1px solid #F54D23;
        padding:3px 5px;
        border-radius:4px;
    }
    #face{
        position:relative;
    }
    #face,#image{
        display:inline-block;
    }
    #submit{
        padding:3px 12px;
        background-color:#F54D23;
        color:#fff;
        border-radius:4px;
        position:absolute;
        right:0;
        top:0;
        bottom:0;
    }
    #imagebox img{
        width:55px;
        height:55px;
        margin-right:5px;
    }
    .function{
        position:relative;
        height:32px;
        line-height:32px;
    }
    .pos{
        position:relative;
        top:1px;
    }
     .nav.am-active{
        color:#F54D23;
    }
    .nav{
        color:#3d0505;
        display:inline-block;
    }

    .am-nav-tabs{
        border-bottom:0.1rem solid #f3e7e3;
    }

    .am-form-field{
        font-size:1.4rem;
    }
</style>
    <div class="am-cf"></div>
    <div class="am-margin-horizontal-sm am-margin-top-sm">
        <input type="text" style="width:70%;-webkit-appearance:none;" class="am-center am-text-center am-padding-xs" placeholder="请粘贴订单号" id="order" />
        <p class="am-text-center am-text-xs am-margin-top-xs am-margin-bottom-sm">可复制淘宝订单号至上面的订单号输入框</p>
    </div>

    <hr />
    <div class="am-margin-horizontal-sm am-margin-top-xs am-text-sm" style="background:#FFF;">
        <span class="pos">到手价:</span>
        <input type="text" id="price" class="am-inline" style="-webkit-appearance:none;" />
        <div class="am-inline pos star">
            <span>&nbsp;&nbsp;&nbsp;评分：</span>
            <i data-id="1" id="star1" class="am-icon-star-o"></i> 
            <i data-id="2" id="star2" class="am-icon-star-o"></i> 
            <i data-id="3" id="star3" class="am-icon-star-o"></i> 
            <i data-id="4" id="star4" class="am-icon-star-o"></i> 
            <i data-id="5" id="star5" class="am-icon-star-o"></i>
            <span id="star_tip"></span>
            <input type="hidden" value="" id="item_star" name="star" />
        </div>
    </div>

    <div class="am-margin-horizontal-sm am-margin-top-xs">
        <textarea name="" id="evaluation" rows="4" class="am-form-field am-text-sm" placeholder="点评一下这件产品吧!"></textarea>
        <div id="Zone" class="am-hide"></div>
    </div>

    <div class="am-margin-horizontal-sm am-margin-top-xs function  am-text-sm">
        <div id="face" class="am-text-warning am-margin-right-sm"><i class="am-icon-smile-o"></i> 表情</div>
        <div id="image" class="am-text-success"><i class="am-icon-image"></i> 添加图片(<span id="image_count">0</span>/5)</div>
        <button type="button" class="am-btn am-radius am-text-sm" id="submit">发布</button>
    </div>
    <div id="imagebox" class="am-margin-sm"></div>

    <hr />

    <div class="am-margin-sm am-text-sm">
        <span style="color:#C98080;"><i class="am-icon-bullhorn"></i>奖励规则：提交您通过本平台复制淘口令下单购买的商品订单号，以及提交至少1张实物图进行晒单，可获得奖励！晒多图更有机会额外获得奖励哦。（请上传实物拍摄图，勿传截图无意义图或带广告性质文字，否则将扣除积分）
        </span>
        <br />
        <a href="javascript:void(0);" style="color:#C98080;text-decoration:underline;" id="tips">如何获取订单号?点此查看</a>
    </div>
</div>
<div class="menu">
        <ul class="am-avg-sm-3 am-text-center am-padding-top-xs">
            <li class="am-vertical-align">
                <a href="./index.php?i=3&c=entry&do=index&m=tiger_taoke">
                    <img src="http://www.juweinong.cn/addons/tiger_taoke/template/mobile/tbgoods/style2/images/home-page-act.png" class="am-text-center am-vertical-align-middle"/>
                    <br />               
                    <span class=" am-text-center am-vertical-align-middle">首页</span>
                </a>
            </li>
            <li  class="am-vertical-align">
                <a href="./index.php?i=3&c=entry&do=sdindex&m=tiger_taoke">
                    <img src="http://www.juweinong.cn/addons/tiger_taoke/template/mobile/tbgoods/style2/images/Inordertoshare-unact.png" class="am-text-center am-vertical-align-middle" />
                    <br />
                    <span class=" am-text-center am-vertical-align-middle">晒单广场</span>
                </a>
            </li>
            <li  class="am-vertical-align">
                <a href="./index.php?i=3&c=entry&do=goods&m=tiger_taoke">
                    <img src="http://www.juweinong.cn/addons/tiger_taoke/template/mobile/tbgoods/style2/images/per-center-unact.png" class="am-text-center am-vertical-align-middle" />
                    <br />
                    <span class=" am-text-center am-vertical-align-middle">积分商城</span>
                </a>
            </li>
        </ul>
    </div><style>
.menu{
        width:100%;
        position:absolute;
        position:fixed;

        bottom:0;
        background:#fff;
        border-top:.1rem solid #F3E7E3;
        z-index:999;
    }
    .menu img {
        width:1.5rem;
        height:1.5rem;
        margin-bottom:.2rem;
    }

    .menu a {
        display:inline-block;
        color:#3d0505;

    }

    .menu a span {
        font-size:1.2rem;
    }
</style>
<footer class="am-footer am-footer-default">
</footer>
<div class="am-hide"></div>		
</body>
</html>
<!-- modal start -->
<div class="am-modal am-modal-alert" tabindex="-1" id="fq_tips_alert">
    <div class="am-modal-dialog" style="border-radius:6px;max-width:392px;">
        <div class="am-modal-hd modal-hd-top" style="padding:.6rem 4rem;font-size:1.4rem;color:#c98080">
            订单号编在你手机淘宝的订单详情里哟~
        </div>
        <div class="am-modal-hd" style="padding-top:0;padding-bottom:.6rem;font-size:1.4rem;color:#c98080">
            ——— 示例 ———
        </div>
        <div class="am-modal-hd" style="padding-top:0;padding-bottom:.6rem;font-size:1.4rem;">
            <img src="http://www.juweinong.cn/addons/tiger_taoke/template/mobile/user/images/order_tips.png" style="max-width:100%;display:block;" />
        </div>
        <div class="am-modal-bd" id="fq_tips_alert_info" style="border-bottom:0;padding:0;padding-bottom:.6rem;">
            <button type="button" style="border:0.1rem solid #F54D23;background:#F54D23;padding:2px 40px;color:#F54D23;border-radius:4px; color:white" data-am-modal-close>确定</button>
        </div>
    </div>
</div>

<script src="http://www.juweinong.cn/addons/tiger_taoke/template/mobile/js/layer_mobile/layer.js"></script>
<script>

</script>
<!-- modal end -->
<script>
    function share_refer(){
        window.location.href = "./index.php?i=3&c=entry&do=sdadd&m=tiger_taoke";
    }
     //弹窗禁止滑动
    function not_scroll(){
        $('body').on('touchmove', function (event) {
            event.preventDefault();
        });
    }
    //关闭弹窗允许滑动
    function is_scroll(){
        $('body').unbind('touchmove');
    }

    //wx.config({"debug":false,"beta":false,"appId":"wxb8bec37c11633246","nonceStr":"PTiqg8Kyzs","timestamp":1478488189,"url":"http:\/\/yitao.m.baikexing.cn\/share\/refer.html","signature":"5a9ff3d846bd4ae4af704a8c50b79d704dcef425","jsApiList":["onMenuShareAppMessage","onMenuShareTimeline","chooseImage","uploadImage","downloadImage"]});
    var appid = "";
        var timestamp = "";
        var nonceStr = "";
        var signature = "";
        wx.config({
            debug: false,
            appId: appid,
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature,
            jsApiList: [
                "onMenuShareAppMessage",
                "onMenuShareTimeline",
                "chooseImage",
                "uploadImage",
                "downloadImage"
            ]
        });

    wx.ready(function(){
       
        //方法

        //上传图片
        function uploadImage(localIds){
            wx.uploadImage({
                localId:localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
                success: function (data) {
                    var serverId = data.serverId; // 返回图片的服务器端ID
                    img.push(serverId);
                    if(serverId){
                        $('#imagebox').append('<img src="'+localIds+'" class="imagearry">');
                        var img_num = $('#image_count').text();
                        $('#image_count').text(parseInt(img_num)+1);
                    }else{
                        $('#fq_alert').modal({});
                    }
                }
            });
        }

        //添加图片
        $('#image').click(function(){
            var len = $('#imagebox img').length;
            if(len >= 5){
                $('#fq_alert_info').text('上传图片太多啦！');
                $('#fq_alert').modal({});
                return false;
            }
            setTimeout(
                wx.chooseImage({
                count:1,
                sizeType: ['original', 'compressed'], 
                sourceType: ['album', 'camera'], 
                success: function (res) {
                    var localIds = res.localIds;
                    uploadImage(localIds[0]);  
                }
            }),300);
        });
    });

    //图片容器
    img = new Array();

    $(document).ready(function() { 
        //表情
        $("#face").facebox({
            Event : "click",    //触发事件  
            divid : "face", //外层DIV ID
            textid : "evaluation" //文本框 ID

        });

        $('#submit').click(function(){
            var grade = $("#item_star").val();
            if(!grade){
                $('#fq_alert_info').text('亲，请对本次活动评分吧！');
                $('#fq_alert').modal({});
                not_scroll();
                return false;
            }
            
            var evaluation  =  $.trim($("#evaluation").val());
            if(evaluation.length < 5){
                $('#fq_alert_info').text('亲，至少要说5个字啦！');
                $('#fq_alert').modal({});
                not_scroll();
                return false;
            }
            
            //订单号 16位 数字
            var order = $.trim($('#order').val());
            if(order == ''){
                $('#fq_alert_info').text('亲，请输入您的订单号！');
                $('#fq_alert').modal({});
                not_scroll();
                return false;
            }

            if(order.match(/^\d{16}$/) == null){
                $('#fq_alert_info').text('亲，订单号为16位的数字哦！');
                $('#fq_alert').modal({});
                not_scroll();
                return false;
            }

            var price = $.trim($('#price').val());
            if(price == ''){
                $('#fq_alert_info').text('亲，请输入商品的到手价！');
                $('#fq_alert').modal({});
                not_scroll();
                return false;
            }

            if(price.match(/^\d{1,}\.{0,1}\d{0,2}$/) == null){
                $('#fq_alert_info').html('亲，请输入正确的到手价！<br />(最多保留两位小数)');
                $('#fq_alert').modal({});
                not_scroll();
                return false;
            }
            if(img.length == 0){
                $('#fq_alert_info').text('亲，至少传一张图啦！');
                $('#fq_alert').modal({});
                not_scroll();
                return false;
            }
            $('#Zone').replaceface($('#evaluation').val());
            var evaluation_has_face = $('#Zone').html();
            $(this).html('<i class="am-icon-spinner am-icon-spin"></i> 发布中').attr('disabled',true);
            $.ajax({
                type:'post',
                url:"./index.php?i=3&c=entry&do=sdpost&m=tiger_taoke",
                dataType:'json',
                data:{"grade":grade,"order":order,"evaluation":evaluation_has_face,"price":price,"img":img},
                success:function(res){
                    $('#fq_alert_info').html(res.info);
                    $('#fq_alert').modal({});
                    $('#submit').text('发布').attr('disabled',false);
                    if(res.status == 1){
                        window.location.href="./index.php?i=3&c=entry&do=sdmy&m=tiger_taoke";
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(status == 'timeout'){
                        $('#fq_alert_info').html('操作超时，请检查网络');
                        $('#fq_alert').modal({});
                    }
                    $('#submit').text('发布').attr('disabled',false);
                }

            });



        });


        //评分
        $(".am-icon-star-o").on('click', function() {
            var id = $(this).data('id');
            switch(id){
                case 1:$("#star_tip").text("讨厌");break;
                case 2:$("#star_tip").text("不喜欢");break;
                case 3:$("#star_tip").text("喜欢");break;
                case 4:$("#star_tip").text("很喜欢");break;
                case 5:$("#star_tip").text("超赞");break;
            }
            $('#item_star').val(id);
            $(".am-icon-star").attr("class","am-icon-star-o");
            for(i=1;i<=id;i++){
                $("#star"+i).attr("class","am-icon-star");
            }
            
        });

        //获取订单号提示框
        $('#tips').click(function(){
            $('#fq_tips_alert').modal({});
            not_scroll();
        });

        $('.am-modal-alert').find('[data-am-modal-close]').click(function(){
            is_scroll();
        });

        $('.am-modal-btn').click(function(){
            is_scroll();
        });
    });
</script>